<template lang="">
  <div class="product-list">
    <div class="header">
      <el-collapse>
        <el-collapse-item title="商品管理介绍">
          商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="content">
      <el-collapse class="search">
        <el-collapse-item title="条件查询">
          <el-form
            ref="form"
            :model="searchForm"
            label-width="100px"
            size="mini"
            class="searchForm"
          >
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="商品名称">
                  <el-input v-model="searchForm.name" placeholder="商品名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="商品货号">
                  <el-input v-model="searchForm.productSn" placeholder="商品货号" />
                </el-form-item>
              </el-col>

              <el-col :span="6" :offset="0">
                <el-form-item label="品牌">
                  <el-select
                    v-model="searchForm.brandId"
                    value-key="id"
                    placeholder="品牌"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="上架状态">
                  <el-select
                    v-model="searchForm.publishStatus"
                    placeholder="上架状态"
                    clearable
                    filterable
                  >
                    <el-option label="上架" value="1" />
                    <el-option label="未上架" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="审核状态">
                  <el-select
                    v-model="searchForm.verifyStatus"
                    placeholder="审核状态"
                    clearable
                    filterable
                  >
                    <el-option label="审核" value="1" />
                    <el-option label="未审核" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="12">
                <el-form-item>
                  <el-button @click="onReset">重置</el-button>

                  <el-button type="primary" @click="onSearch">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-card shadow="never" class="list">
        <div slot="header">
          <el-button type="primary" size="mini" @click="handleGoAdd">新增</el-button>
          <el-button type="primary" size="mini" @click="handleExport">导出商品列表excel文件</el-button>
        </div>
        <el-table :data="produceList" border stripe>
          <el-table-column
            label="序号"
            type="index"
            width="75"
            fixed="left"
          />
          <el-table-column
            label="商品图片"
            width="150"
          >
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.pic" class="pic">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.name }}</p>
                <p>品牌:{{ scope.row.brandName }}</p>
                <p>{{ scope.row.description }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品价格"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <p>原价;{{ scope.row.originalPrice }}</p>
                <p>现价:{{ scope.row.price }}</p>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品类别"
            width="150"
            align="center"
            prop="productCategoryName"
          />

          <el-table-column
            label="标签"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <p>最新:<el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0" @change="handleNewStatusChange(scope.row.id, scope.row.newStatus)" />
                </p>
                <p>推荐:<el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0" @change="handleRecommendStatusChange(scope.row.id, scope.row.recommendStatus)" /></p>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="标签2"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <p>发布:<el-switch v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0" @change="handlePublishStatusChange(scope.row.id, scope.row.publishStatus)" /></p>
                <p>审核:<el-switch v-model="scope.row.verifyStatus" :active-value="1" :inactive-value="0" @change="handleVerifyStatusChange(scope.row.id, scope.row.verifyStatus)" /></p>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="sku"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="default" @click="handleEditSku(scope.row.id)">编辑sku</el-button>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="重量"
            width="150"
            align="center"
            prop="weight"
          />
          <el-table-column
            label="排序"
            width="150"
            align="center"
            prop="sort"
          />

          <el-table-column
            label="操作"
            width="150"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="default" @click="handleEditProduct(scope.row.id)">编辑</el-button>
                <el-button type="text" size="default" style="color: red" @click="handleDelProduct(scope.row.id)">删除</el-button>

              </div>
            </template>
          </el-table-column>

        </el-table>

        <div class="footer">
          <el-pagination
            :current-page.sync="page.start"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
            @size-change="sizeChange"
            @current-change="currentChange"
          />

        </div>
      </el-card>
      <EditSkuDialog ref="editSkuDialogRef" />
    </div>
  </div>
</template>
<script>
import { findAllBrand, productsByPage, switchNewStatus, switchRecommandStatus, switchPublishStatus, switchVerifyStatus, delProduct } from '@/api/product/index'

import EditSkuDialog from './components/EditSku'
export default {
  components: {
    EditSkuDialog
  },
  data() {
    return {
      searchForm: {},
      brandList: [], // 品牌列表
      produceList: [], // 商品列表
      page: {
        start: 1,
        limit: 10,
        totalNum: 0
      }
    }
  },
  created() {
    this.getAllBrand()
    this.getProductsList()
  },
  methods: {
    // 获取所有的品牌
    async getAllBrand() {
      const { success, data, message } = await findAllBrand()
      if (success) {
        this.brandList = data.items
      } else {
        this.$message.error(message)
      }
    },
    // 获取商品列表
    async getProductsList() {
      const { success, data, message } = await productsByPage(
        this.page.start,
        this.page.limit,
        this.searchForm
      )
      if (success) {
        this.produceList = data.rows
        this.page.totalNum = data.total
      } else {
        this.$message.error(message)
      }
    },
    handleGoAdd() {
      this.$router.push('/product/add')
    },
    // 编辑商品
    handleEditProduct(id) {
      this.$router.push(`/product/edit/${id}`)
    },
    // 搜索
    onSearch() {
      this.getProductsList()
    },
    // 重置
    onReset() {
      this.searchForm = {}
      this.getProductsList()
    },
    // 修改最新状态
    async handleNewStatusChange(productId, status) {
      const { success, message } = await switchNewStatus({ productId, status })
      if (success) {
        this.$message.success('修改成功')
      } else {
        this.$message.error(message)
      }
    },
    // 修改推荐状态
    async handleRecommendStatusChange(productId, status) {
      const { success, message } = await switchRecommandStatus({ productId, status })
      if (success) {
        this.$message.success('修改成功')
      } else {
        this.$message.error(message)
      }
    },
    async handlePublishStatusChange(productId, status) {
      const { success, message } = await switchPublishStatus({ productId, status })
      if (success) {
        this.$message.success('修改成功')
      } else {
        this.$message.error(message)
      }
    },
    async handleVerifyStatusChange(productId, status) {
      const { success, message } = await switchVerifyStatus({ productId, status })
      if (success) {
        this.$message.success('修改成功')
      } else {
        this.$message.error(message)
      }
    },
    // 编辑sku
    handleEditSku(id) {
      console.log('handleEditSku:', id)
      this.$refs.editSkuDialogRef.open(id)
    },

    // 删除商品
    handleDelProduct(id) {
      this.$confirm('此操作将永久删除该商品,是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        const { success, message } = await delProduct(id)
        if (success) {
          this.$message.success('删除成功')
          this.getProductsList()
        } else {
          this.$message.error(message)
        }
      })
    },
    // 导出
    handleExport() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品Id', '商品名称', '品牌名称', '添加时间', '描述']
        const filterVal = ['id', 'name', 'brandName', 'createTime', 'description']
        const data = this.formatJson(filterVal, this.produceList)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },

    // 格式化导出表格数据
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    sizeChange(newVal) {
      this.page.limit = newVal
      this.page.start = 1
      this.getProductsList()
    },
    currentChange(newVal) {
      this.page.start = newVal
      this.getProductsList()
    }

  }
}
</script>
<style lang="scss" scope>
.product-list {
  .header {
    padding: 10px;
    background: #fff;
  }
  .content {
    margin: 30px;
    .search {
      padding: 10px;
      background: #fff;
      .searchForm {
        .el-form-item label {
          font-weight: 400;
        }
      }
    }
    .list {
      margin-top: 30px;
      .pic {
        width: 100px;
        height: 100px;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    margin-top:30px;
  }
}
</style>
